<template>
  <view class="pay-money">
    <wd-navbar title="我的合同" left-arrow @click-left="handleClickLeft"></wd-navbar>
    <view class="pay-money-content">
      <view class="pay-money-container">
        <view class="pay-money-top">
          <wd-drop-menu>
            <wd-drop-menu-item icon="caret-down-small" icon-size="28px" v-model="value" :options="option"
                               @change="handleChange1"/>
          </wd-drop-menu>
          <view class="pay-money-image flex flex-center">
            <image src="https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/CRM/%E5%AE%B9%E5%99%A8%402x%20(1).png"></image>
          </view>
          <view class="pay-money-info">
            <view class="flex flex-between mb40">
              <view class="label">账号</view>
              <view>25453356356356563</view>
            </view>
            <view class="flex flex-between mb40">
              <view class="label">户名</view>
              <view>李大宝</view>
            </view>
            <view class="flex flex-between mb32">
              <view class="label">备注</view>
              <view>转账请注明楼盘和单元</view>
            </view>
          </view>
        </view>
        <view class="pay-money-footer flex flex-evenly">
          <view class="flex flex-center"><img
              src="https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/CRM/%E5%AE%B9%E5%99%A8%402x%20(2).png"/>收款账号
          </view>
          <view class="line" v-if="value===0"></view>
          <view class="flex flex-center" v-if="value===0"><img
              src="https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/CRM/%E5%AE%B9%E5%99%A8%402x%20(2).png"/>收款码
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue";
const value = ref(0)
const option = ref([
  {label: '支付包', value: 0},
  {label: '银行卡', value: 1}
])
const handleClickLeft = () => {
  uni.navigateBack()
}
</script>
<style scoped lang="scss">
.pay-money {
  background: #007DFF;
  height: 100vh;

  :deep(.wd-navbar) {
    padding-top: 88rpx;
    background: transparent;

    .wd-navbar__title {
      font-size: 36rpx;
      color: #FFFFFF;
    }

    .wd-navbar__arrow {
      width: 36rpx;
      color: #FFFFFF;
    }
  }

  :deep(.wd-navbar::after) {
    background: transparent !important;
  }

  &-content {
    padding: 80rpx 34rpx 0;
  }

  &-container {
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
    border-radius: 20rpx;
    overflow: hidden;

    :deep(.wd-popup) {
      width: calc(100% - 68rpx);
      left: 34rpx;
    }
  }

  &-image {
    padding: 48rpx;
    margin-bottom: 32rpx;
    border-bottom: 2rpx solid #E2E8F0;

    image {
      width: 404rpx;
      height: 404rpx;
    }
  }

  &-top {
    padding: 0 32rpx 0;
  }

  &-info {
    font-size: 28rpx;
    color: #3D3D3D;

    .label {
      color: #86909C;
    }
  }

  &-footer {
    border-top: 2rpx solid #E2E8F0;
    padding: 40rpx 0;
    font-size: 32rpx;
    color: #007DFF;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 16rpx;
    }

    .line {
      width: 8rpx;
      height: 50rpx;
      background: #E1E6ED;
      border-radius: 4rpx;
    }
  }
}

</style>